﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
    <el-button type="primary" v-on:click="handleAdd()">新增</el-button>
    <el-table :data="data" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="name" label="名字" width="180"></el-table-column>
        <el-table-column prop="sex" label="性别" width="180"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" v-on:click="handleEdit(scope.row)">
                    Edit
                </el-button>
                <el-button size="small"
                           type="danger"
                           v-on:click="handleDelete(scope.row.id)">
                    Delete
                </el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-dialog v-model="dialogVisible"
               title="修改"
               width="500">
        <span>
            <el-form ref="uruleFormRef" :model="uform" :rules="urules" label-width="auto" style="max-width: 600px">
                <el-form-item label="编号" prop="Id">
                    <el-input v-model="uform.Id" />
                </el-form-item>
                <el-form-item label="名字" prop="Name">
                    <el-input v-model="uform.Name" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="uform.Sex" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="udialogVisible = false">Cancel</el-button>
                    <el-button type="primary" v-on:click="upOk()">
                        修改
                    </el-button>
                </el-form-item>
            </el-form>

        </span>

    </el-dialog>

    <el-dialog v-model="adialogVisible"
               title="新增"
               width="500">
        <span>
            <el-form ref="aruleFormRef" :model="aform" :rules="urules" label-width="auto" style="max-width: 600px">
                <el-form-item label="名字" prop="Name">
                    <el-input v-model="aform.Name" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="aform.Sex" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="adialogVisible = false">Cancel</el-button>
                    <el-button type="primary" v-on:click="AddOk()">
                        新增
                    </el-button>
                </el-form-item>
            </el-form>

        </span>

    </el-dialog>
</div>
<script type="text/javascript">
    const { createApp, ref, reactive } = Vue
    var app = createApp({
        setup() {
            let m = ref(1);
            let data = ref([]);
            let dialogVisible = ref(false);
            let adialogVisible = ref(false);
            const uruleFormRef = ref(null);
            const aruleFormRef = ref(null);
            const uform = reactive({
                Id: '',
                Name: '',
                Sex: ''
            })
            const aform = reactive({
                Name: '',
                Sex: ''
            })
            const urules = reactive({
                Name: [
                    { required: true, message: '请输入名字', trigger: 'blur' },

                ],
            })

            //定义
            function fill() {
                axios.get('/Student/Index1')
                    .then(res => {
                        //console.info(res)
                        data.value = res.data;
                    })
                    .catch(err => {
                        console.info(res);
                    })
            }
            //新增显示
            function handleAdd() {
                adialogVisible.value = true;
            }
            function AddOk() {
                aruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                        axios.post('/Student/Insert', {
                            Name: aform.Name,
                            Sex: aform.Sex
                        }).then(res => {

                            if (res.data > 0) {

                                fill();
                                adialogVisible.value = false;

                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }

            //修改显示
            function handleEdit(row) {

                dialogVisible.value = true;
                uform.Id = row.id;
                uform.Name = row.name;
                uform.Sex = row.sex;
            }
            //修改提交
            function upOk() {

                uruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                        axios.put('/Student/Update', {
                            Id: uform.Id,
                            Name: uform.Name,
                            Sex: uform.Sex
                        }).then(res => {

                            if (res.data > 0) {

                                fill();
                                dialogVisible.value = false;

                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }
            //删除
            function handleDelete(id) {
                // console.info(id);
                if (confirm("确认删除吗？")) {
                    axios.delete('/Student/Delete/' + id)
                        .then(res => {
                            if (res.data > 0) {
                                fill();
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        });
                }
            }
            //调用
            fill();
            return {
                m,
                data,
                handleEdit,
                handleDelete,
                dialogVisible,
                adialogVisible,
                uform,
                aform,
                urules,
                upOk,
                uruleFormRef,
                aruleFormRef,
                handleAdd,
                AddOk
            }
        }
    });
    app.use(ElementPlus)
    app.mount('#app')
</script>